<template>
  <view class="navigation" :class="{ 'navigation--transparent': navTransparent > 0 }">
    <up-navbar :bgColor="computedBgColor" :safeAreaInsetTop="true" :fixed="true" :titleStyle="titleStyle"
      height="80rpx">
      <template #left>
        <view class="nav-actions">
          <view class="nav-action-item" :class="{ 'nav-action-item--active': navTransparent > 50 }">
            <!-- <up-icon name="map" size="24" :color="textColor"></up-icon> -->
          </view>
          <view class="nav-action-item" :class="{ 'nav-action-item--active': navTransparent > 50 }">
            <!-- <up-icon name="search" size="24" :color="textColor"></up-icon> -->
          </view>
          <view class="nav-action-item" :class="{ 'nav-action-item--active': navTransparent > 50 }">
            <!-- <up-icon name="map-fill" size="24" :color="textColor"></up-icon> -->
          </view>
        </view>
      </template>

      <template #center v-if="showTitle">
        <text class="nav-title" :style="titleStyle">{{ title }}</text>
      </template>
    </up-navbar>
  </view>
</template>

<script>
import { useUserStore } from '@/store';
import { colors } from '@/config/theme';

export default {
  props: {
    navTransparent: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    showTitle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userStore: null,
      index: 0,
      tabbar: []
    };
  },
  computed: {
    // 根据透明度计算背景色 - 使用主题色并添加阴影效果
    computedBgColor() {
      // const opacity = Math.max(0, Math.min(0.95, 1 - this.navTransparent / 100));
      // return `rgba(255, 103, 0, ${opacity})`;
      return `#ff6700`;
    },

    // 根据透明度计算文字颜色 - 使用主题中的文本颜色
    textColor() {
      // 当导航栏较透明时使用白色文字，否则使用主色调
      return this.navTransparent > 50 ? colors.text.primary : '#ffffff';
    },

    // 标题样式
    titleStyle() {
      return {
        color: this.textColor,
        fontSize: '33rpx',
        fontWeight: this.navTransparent > 50 ? 500 : 400,
        textShadow: this.navTransparent <= 50 ? '0 1rpx 2rpx rgba(0, 0, 0, 0.2)' : 'none'
      };
    }
  },
  onLoad() {
    this.userStore = useUserStore();
    this.index = this.userStore.tabIndex;
    this.tabbar = this.userStore.tabbar;
  }
};
</script>

<style lang="scss" scoped>
.navigation {
  width: 100%;
  transition: all 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 10;

  &--transparent {
    background: transparent;
  }
}

.nav-actions {
  width: 500rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
}

.nav-action-item {
  padding: 12rpx;
  border-radius: var(--radius-circle);
  transition: all 0.2s ease;

  &:active {
    background-color: rgba(0, 0, 0, 0.05);
  }

  // 当导航栏不透明时，为图标添加背景悬停效果
  &--active {
    &:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }
}

.nav-title {
  font-size: 38rpx;
  font-weight: 500;
}
</style>